<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>楚地灵韵 - AR导览</title>
    <link rel="stylesheet" href="styles.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
</head>
<body>
    <div class="app-container">
        <!-- Header -->
        <header class="app-header">
            <div class="header-content">
                <div class="back-button icon-button">
                    <i class="fas fa-arrow-left"></i>
                </div>
                <div class="logo">AR景点导览</div>
                <div class="header-icons">
                    <div class="icon-button">
                        <i class="fas fa-share-alt"></i>
                    </div>
                </div>
            </div>
        </header>

        <!-- Main Content -->
        <div class="app-content">
            <!-- Map Section -->
            <div class="map-container">
                <img src="https://picsum.photos/600/300" alt="景区地图">
                <div class="map-overlay">
                    <div class="location-info">
                        <div class="location-name">楚文化博物馆</div>
                        <div class="location-address">湖北省荆州市荆州区</div>
                    </div>
                    <div class="ar-button">
                        <i class="fas fa-map-marker-alt"></i>
                        导航前往
                    </div>
                </div>
            </div>

            <!-- Spirit Guide -->
            <div class="spirit-guide">
                <img src="https://picsum.photos/200/200?random=1" alt="灵韵向导" class="spirit-avatar-large">
                <div class="spirit-info">
                    <div class="spirit-title">屈原灵韵</div>
                    <div class="spirit-description">我是您今天的虚拟导游，将为您介绍楚文化博物馆的历史与文物。</div>
                    <div class="spirit-action">
                        <i class="fas fa-volume-up"></i>
                        点击开始语音讲解
                    </div>
                </div>
            </div>

            <!-- Recommended Spots -->
            <div class="section">
                <div class="section-header">
                    <div class="module-title">推荐景点</div>
                    <div class="view-all">
                        查看全部
                        <i class="fas fa-chevron-right"></i>
                    </div>
                </div>
                
                <div class="spot-card">
                    <div class="spot-image">
                        <img src="https://picsum.photos/600/400?random=2" alt="景点图片">
                    </div>
                    <div class="spot-info">
                        <div class="spot-header">
                            <div class="spot-name">曾侯乙编钟展区</div>
                            <div class="spot-rating">
                                <i class="fas fa-star"></i>
                                4.9
                            </div>
                        </div>
                        <div class="spot-details">
                            <div class="spot-distance">
                                <i class="fas fa-map-marker-alt"></i>
                                距您 50 米
                            </div>
                        </div>
                        <div class="spot-description">
                            曾侯乙编钟是中国出土的规模最大、保存最完整的一套古代乐器，被誉为"稀世国宝"。
                        </div>
                        <div class="spot-tags">
                            <div class="spot-tag">国家一级文物</div>
                            <div class="spot-tag">AR互动</div>
                        </div>
                    </div>
                </div>

                <div class="spot-card">
                    <div class="spot-image">
                        <img src="https://picsum.photos/600/400?random=3" alt="景点图片">
                    </div>
                    <div class="spot-info">
                        <div class="spot-header">
                            <div class="spot-name">战国楚简展区</div>
                            <div class="spot-rating">
                                <i class="fas fa-star"></i>
                                4.7
                            </div>
                        </div>
                        <div class="spot-details">
                            <div class="spot-distance">
                                <i class="fas fa-map-marker-alt"></i>
                                距您 120 米
                            </div>
                        </div>
                        <div class="spot-description">
                            展示从战国时期楚墓出土的竹简，记载了重要的历史文献和古代医书。
                        </div>
                        <div class="spot-tags">
                            <div class="spot-tag">文字文物</div>
                            <div class="spot-tag">AR解析</div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Recommended Routes -->
            <div class="section">
                <div class="section-header">
                    <div class="module-title">精选路线</div>
                    <div class="view-all">
                        查看全部
                        <i class="fas fa-chevron-right"></i>
                    </div>
                </div>

                <div class="route-card">
                    <div class="route-image">
                        <img src="https://picsum.photos/200/300?random=4" alt="路线图片">
                    </div>
                    <div class="route-info">
                        <div class="route-title">楚文化精华一小时</div>
                        <div class="route-stats">
                            <div class="route-stat">
                                <i class="fas fa-clock"></i>
                                约1小时
                            </div>
                            <div class="route-stat">
                                <i class="fas fa-map-signs"></i>
                                5个景点
                            </div>
                        </div>
                        <div class="route-description">
                            带您快速浏览博物馆中最具代表性的楚文化文物，感受楚国辉煌历史。
                        </div>
                    </div>
                </div>

                <div class="route-card">
                    <div class="route-image">
                        <img src="https://picsum.photos/200/300?random=5" alt="路线图片">
                    </div>
                    <div class="route-info">
                        <div class="route-title">楚国艺术专题游</div>
                        <div class="route-stats">
                            <div class="route-stat">
                                <i class="fas fa-clock"></i>
                                约1.5小时
                            </div>
                            <div class="route-stat">
                                <i class="fas fa-map-signs"></i>
                                7个景点
                            </div>
                        </div>
                        <div class="route-description">
                            深入探索楚国艺术的发展与特色，包括漆器、玉器、铜器和丝织品等。
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Bottom Navigation -->
        <div class="bottom-nav">
            <div class="nav-item">
                <i class="fas fa-home"></i>
                首页
            </div>
            <div class="nav-item active">
                <i class="fas fa-map-marked-alt"></i>
                导览
            </div>
            <div class="nav-item">
                <i class="fas fa-calendar-alt"></i>
                活动
            </div>
            <div class="nav-item">
                <i class="fas fa-ghost"></i>
                灵韵
            </div>
            <div class="nav-item">
                <i class="fas fa-user"></i>
                我的
            </div>
        </div>

        <!-- Floating AR Button -->
        <div class="fab">
            <i class="fas fa-camera"></i>
        </div>
    </div>

    <script>
        // 简单的点击事件
        document.querySelector('.back-button').addEventListener('click', function() {
            window.location.href = 'index.html';
        });
    </script>
</body>
</html> 